import React from "react";

//所有react都可以解构
// import React,{Component} from "react";
//APP是组件，封装了一块HTML内容

//声明组件 组件return的是一个标签，多于一个标签，就要套父元素，外部套div
//函数组件：16.8之前，页脚UI组件，木偶组件
const Header = (props) => {
    // console.log(props);
    return <header>
        {[1, 2, 3, 4, 5]}
        这是标题{props.title}
    </header>
}
//循环渲染
const Content = (props) => {
    console.log(props);
    return <ul>
        {
            props.data.map(item => <li>{item}</li>)
        }
        {
            // props.data.map( item=>{
            //     return<li>{item}</li>
            // })
        }
    </ul>
}

// const Footer = () =>{
//     return <footer>
//         这是页尾
//     </footer>
// }

//类组件
class Footer extends React.Component {
    constructor() {
        // super(props);//最前面super否则，未定义
        super();
        this.state = {
            time: new Date().toLocaleTimeString(),
            a: 0,
            b: ''
        }
        this.timer = setInterval(() => {
            this.setState({ time: new Date().toLocaleTimeString() })
        }, 1000)
    }
    //卸载（只执行一次）
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    //挂载只执行一次，发请求在这里！！！立即执行也放在这里
    componentDidMount() {
        console.log('didmount')
    }
    //页面更新阶段 （更新就执行）
    shouldComponentUpdate() {
        console.log('shouldUpdate')
        return true;
    }
    componentDidUpdate() {
        console.log('didUpdata')
    }

    render() {
        //组件内进行数据绑定
        return <div>
            <h2>{this.state.time}</h2>
            <footer>这是页尾（类组件形式）{this.props.data}</footer>
        </div>
    }
}

class Demo extends React.Component {
    constructor() {
        super();
        this.state = { title: '事件绑定' };
        this.handleClick = this.handleClick.bind(this);

        // this.state = {}
    }
    handleClick() {
        console.log(this);
        this.setState({ title: 'new title' })
        console.log('click');
    }
    handleClick2 = () => {
        this.setState({ title: 'new title' })
    }
    render() {
        return <div>
            <button onClick={this.handleClick}>更新状态</button>
            <button onClick={this.handleClick2}>更新状态2</button>
            <h2>{this.state.title}</h2>
        </div>
    }
}

// function App() {        
//         return ( 
//         <div>
//             <Header title='React'/>
//             hello React
//             <Demo />
//             <div>
//                 <Header title='内容标题'/>
//                 content
//                 <Content data={['a','b','c']}/>
//             </div>
//             <Footer data='尾部内容'/>
//         </div>
//     );
// }

const App = () => {
    return (<div>
        <Demo />
    </div>);
}



// function App() {
//     const txt = '数据绑定';
//     //const ele = <h1>babel编译</h1>
//     //两个ele一样，上面是语法糖，下面是真实原理
//     // const ele = React.createElement('h1',null,'babel编译')
//     // console.log(ele)
//     return ( 
//     <div className = "App" >
//          hello react{txt}
//     </div>


//     );
// }

export default App;